<template>
  <div class="sign">

    <!-- 签到表格 -->
    <el-table :data="cSigns.lists" border row-key="_id" :expand-row-keys="signs.expandKeys" class="table">
      <!-- 签到学生折叠面板 -->
      <el-table-column type="expand">
        <template scope="scope">
          <div class="table__students">
            <!-- 学生信息 -->
            <div class="table__students-user" v-for="item in scope.row.course.students" :key="item._id">
              <el-tooltip :content="'学号: ' + item.code">
                <img :src="item.avatar" alt="" :class="{'table__students-user-img': true, 'no':!item.isScan }">
              </el-tooltip>
              <span class="table__students-user-name" v-if="item.isScan">{{item.name}}</span>
              <span class="table__students-user-name" style="color:#cccccb;" v-else>{{item.wx_name}}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- 所属课程 -->
      <el-table-column prop="course.name" label="所属课程"></el-table-column>
      <!-- 开始时间 -->
      <el-table-column prop="begin_time" label="开始时间"></el-table-column>
      <!-- 结束时间 -->
      <el-table-column prop="end_time" label="结束时间"></el-table-column>
      <!-- 地点 -->
      <el-table-column prop="site" label="地点"></el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作">
        <template scope="scope">
          <el-button size="mini" type="primary" @click="showCodeDialog(scope.row._id, scope.row.site)">查看二维码</el-button>
          <el-button size="mini" type="info" @click="refreshStudentFn(scope.row._id)">刷新签到学生</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination :total="cSigns.total" :page-size="cSigns.pageSize" class="sign__page" @current-change="changePageFn"></el-pagination>

    <!-- 查看二维码 -->
    <el-dialog :title="showCode.title" :visible.sync="showCode.isShow" size="tiny" @close="closeCodeDialog">
      <img :src="showCode.codeUrl" alt="" style="width:100%;height:100%;">
    </el-dialog>

  </div>
</template>

<script>
import {pageSize} from '@/config'

export default {
  name: 'sign',
  created () {
    this.applyData(this.signs.pageNum)
  },
  data () {
    return {
      // 签到表
      signs: {
        lists: [],
        pageNum: 1,
        total: 0,
        pageSize: pageSize,
        expandKeys: []
      },
      // 二维码弹窗
      showCode: {
        isShow: false,
        title: '',
        codeUrl: ''
      }
    }
  },
  watch: {
    $route () {
      this.applyData(this.signs.pageNum)
    }
  },
  computed: {
    // 计算后的signs
    cSigns () {
      let lists = this.signs.lists.map(item => {
        item.begin_time = new Date(item.begin_time).toLocaleString()
        item.end_time = new Date(item.end_time).toLocaleString()
        return item
      })
      return Object.assign({}, this.signs, {lists})
    }
  },
  methods: {
    // 应用数据
    applyData (pageNum) {
      this.$store.dispatch('getSignByPage', {
        pageNum: this.signs.pageNum,
        cid: this.$route.query.cid
      }).then(res => {
        this.signs.total = res.data.total
        this.signs.lists = res.data.lists
        // 默认打开行
        this.signs.expandKeys = [].concat(this.signs.expandKeys)
      })
    },
    // 分页获取数据
    changePageFn (pageNum) {
      this.signs.pageNum = pageNum
      this.applyData(pageNum)
    },
    // 刷新学生数据
    refreshStudentFn (sid) {
      this.signs.expandKeys = [sid]
      this.applyData(this.pageNum)
    },
    // 显示二维码弹窗
    showCodeDialog (sid, name) {
      this.showCode.title = name
      this.showCode.codeUrl = `/others/make_code?url=/sign/addStudent?sign_id=${sid}`
      this.showCode.isShow = true
    },
    // 关闭二维码弹窗
    closeCodeDialog () {
      this.showCode.codeUrl = ''
    }
  }
}
</script>

<style scoped>
  .sign {
    overflow: scroll;
  }
  /* 分页 */
  .sign__page {
    margin-top: 10px;
  }
   /* 课程学生 */
  .table__students {
    display: flex;
    flex-wrap: wrap;
  }
  /* 学生信息 */
  .table__students-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px;
    margin-top: 10px;
    margin-right: 10px;
  }
  .table__students-user-img {
    width: 30px;
    height: 30px;
    border-radius: 30px;
  }
  .table__students-user-img.no {
    -webkit-filter:blur(2px);
	  filter:blur(2px);
  }
  .table__students-user-name {
    font-size: 12px;
    color: #666;
  }
</style>